<template>
  <div>
    <el-form label-width="100px" :model="state.form" style="max-width: 600px">
      <el-form-item label="logo">
        <div class="sd-flex">
          <div class="choice-image choice-image-delete" @click="onChoiceImage">
            <el-image
                v-if="state.form.logo != '' && state.form.logo != null"
                :src="STATIC_URL + state.form.logo"
                fit="cover"
                class="cover-image"
                :preview-src-list="[STATIC_URL + state.form.logo]"
                :preview-teleported="true"
                @click.stop
            />
            <el-icon v-else>
              <ele-Plus/>
            </el-icon>
            <div class="delete-content" @click.stop="state.form.logo = ''" v-if="state.form.logo != ''">
              <SvgIcon name="ele-DeleteFilled"></SvgIcon>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="商城名称">
        <el-input v-model="state.form.name" clearable/>
      </el-form-item>
      <el-form-item label="商城域名">
        <el-input v-model="state.form.domain" clearable/>
      </el-form-item>

      <el-form-item label="cdnUrl">
        <el-input v-model="state.form.cdnUrl" clearable/>
      </el-form-item>
      <el-form-item label="用户协议">
        <el-input v-model="state.form.userProtocol.title">
          <template #append>
            <el-button @click="onOpenRichTextChoice('userProtocol')">选择富文本</el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="隐私协议">
        <el-input v-model="state.form.privacyProtocol.title">
          <template #append>
            <el-button @click="onOpenRichTextChoice('privacyProtocol')">选择富文本</el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="关于我们">
        <el-input v-model="state.form.aboutUs.title">
          <template #append>
            <el-button @click="onOpenRichTextChoice('aboutUs')">选择富文本</el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="版本号">
        <el-input v-model="state.form.version"/>
      </el-form-item>
      <el-form-item label="版权信息">
        <el-input v-model="state.form.copyright"/>
      </el-form-item>

      <el-form-item label="版权时间">
        <el-input v-model="state.form.copytime"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" size="default">
          重置
        </el-button>
        <el-button type="primary" size="default" @click="submit">
          保存
        </el-button>
      </el-form-item>
    </el-form>
    <FileChoice ref="FileChoiceRef" @choiceFile="choiceFile"></FileChoice>

    <RichTextChoice ref="RichTextChoiceRef" @choice="choiceRichText"></RichTextChoice>
  </div>
</template>

<script setup lang="ts">
import {defineAsyncComponent, reactive, ref} from 'vue';
import {STATIC_URL} from '/@/utils/config';
import messageUtils from "/@/utils/messageUtils";
import {SettingApi} from '/@/api/shop/setting';

const FileChoice = defineAsyncComponent(() => import('/@/views/file/choice/index.vue'));
const FileChoiceRef = ref();

const RichTextChoice = defineAsyncComponent(() => import('/@/views/shop/data/richtext/choice/index.vue'));

const RichTextChoiceRef = ref();
const state = reactive({
  form: {
    id: '',
    logo: '',
    name: '',
    domain: '',

    userProtocol: {
      id: '',
      title: '',
    }, // 用户协议

    privacyProtocol: {
      id: '',
      title: ''
    }, // 隐私协议
    aboutUs: {
      id: '',
      title: ''
    }, // 关于我们
    version: '',
    copyright: '',  // 版权信息
    copytime: '',
    cdnUrl: ''
  },
});
let richTextType: string = ''
const choiceFile = (res: any[]) => {
  console.log('choiceFile: ', res[0]);
  state.form.logo = res[0].visitRelativePath;
};

const onChoiceImage = () => {
  FileChoiceRef.value.openFileChoiceDialog();
};

const onOpenRichTextChoice = (type: string) => {
  richTextType = type;
  RichTextChoiceRef.value.openDialog();
}

const onChoice = async () => {
  try {
    const {data} = await SettingApi().view_base_setting()
    state.form = data

    if (data.logo == null) {
      state.form.logo = ''
    }
    if (data.privacyProtocol == null) {
      state.form.privacyProtocol = {
        id: '',
        title: '',
      }
    }
    if (data.userProtocol == null) {
      state.form.userProtocol = {
        id: '',
        title: '',
      }
    }
    if (data.aboutUs == null) {
      state.form.aboutUs = {
        id: '',
        title: '',
      }
    }
    console.log(data)
  } catch (e) {
    messageUtils().error("操作失败，稍后重试")
  }
}

const choiceRichText = (richText: ChoiceRichText) => {
  console.log('choiceRichText: ', richText);

  if (richTextType === 'userProtocol') {
    state.form.userProtocol.title = richText.title;
    state.form.userProtocol.id = richText.id;

  } else if (richTextType === 'privacyProtocol') {

    state.form.privacyProtocol.title = richText.title;
    state.form.privacyProtocol.id = richText.id;

  } else {
    state.form.aboutUs.title = richText.title;
    state.form.aboutUs.id = richText.id;
  }

};


const submit = async () => {
  try {
    const {data} = await SettingApi().update_base_setting(state.form);
    messageUtils().success("操作成功")
  } catch (e) {
    messageUtils().error("操作失败，请稍后重试")
  }
}
defineExpose({onChoice});
</script>

<style scoped lang="scss"></style>
